
<template>
  <div class="asideMenu">
    <el-drawer
      :visible="!config.isCollapse"
      :before-close="menuHandleClose"
      :modal-append-to-body="false"
      :with-header="false"
      direction="ltr"
      size="200px"
      style="overflow: auto"
    >

      <div>
        <el-menu
          :default-active="active"
          class="el-menu-vertical-demo"
          @close="handleClose"
          background-color="#323639"
          text-color="#fff"
          :collapse="false"
          style="height:100%;overflow-x: hidden;"
        >
          <div class="sidebar-logo-container">
            <img class="sidebar-logo" src="../assets/img/15907344041.png" />
            <h1 class="sidebar-title" v-if="!config.isCollapse">{{ config.webTitle }}</h1>
          </div>

          <!-- 导航菜单树组件，动态加载菜单 -->
          <menutree v-for="item in menuTree" :key="item.id" :menu="item"></menutree>
        </el-menu>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import menutree from "./menutree.vue";
export default {
  components: {
    menutree: menutree
  },
  data() {
    return {
      menuTree: [],
      active: "/home"
    };
  },
  watch: {
    $route: function(to, from) {
      if (to && to.fullPath) {
        this.active = to.fullPath;
      }
    }
  },
  created: function() {
    this.menuTree = require("../assets/json/menu.json");
  },
  computed: {
    config: function() {
      return this.$store.state.config;
    }
  },
  mounted() {},
  methods: {
    open: function(path) {
      this.$router.push(path);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    menuHandleClose() {
      this.$store.state.config.isCollapse = true;
    }
  }
};
</script>
<style scoped>
._title {
  letter-spacing: 3px;
  font-size: 19px;
  color: #eee;
  padding-left: 50px;
  float: left;
  margin: 0 8px;
  line-height: 60px;
  outline: 0;
}
/* 侧边菜单栏样式————开始 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  min-height: 400px;
}
.el-menu {
  border-right: solid 0px #e6e6e6;
}
.el-menu-item i {
  height: 56px;
  line-height: 56px;
}

.sidebar-logo-container {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  /* background: #2b2f3a; */
  text-align: left;
  overflow: hidden;
}
.sidebar-logo-container .sidebar-logo {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin: 6px 12px;
}
.sidebar-logo-container .sidebar-title {
  display: inline-block;
  margin: 0;
  color: #fff;
  font-weight: 600;
  line-height: 50px;
  font-size: 16px;
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  vertical-align: middle;
}

/* 侧边菜单栏样式————结束 */
</style>
<style >
.asideMenu .asideIcon {
  line-height: 56px;
}
.el-drawer__body {
  overflow: auto
}

</style>